<template>
  <n-layout style="margin-top: 20px;" >
    <n-card>
      <n-thing description-style="font-size:18px">
        <template  #avatar>
          <n-avatar
              :size="200"
              :src="info.picUrl || '/src/assets/img/109951163833244126.jpg'"
          />
        </template>
        <template  #header>
          <h1>{{ info.name }}</h1>
        </template>
        <template  #header-extra>
          <n-space>
            <n-button v-if="id != 0 && userInfo?.id === info.createUserVo?.id" @click="openSongInfo" >
              编辑歌单信息
            </n-button>
            <n-button color="red" v-if="id != 0 && userInfo?.id === info.createUserVo?.id" @click="removeSongList" >
              删除
            </n-button>
          </n-space>
        </template>
        <template #description>
          <n-space vertical>
            <div> <SIcon icon="icon-person"/> {{ info.createUserVo?.name}}</div>
            <div v-if="id != 0"> 播放量：{{ info.playNum}}</div>
            <div v-if="id != 0"> 收藏量：{{ info.collectNum}}</div>
            <n-space>
              <n-button @click="playMusic(null,0)">播放</n-button>
              <n-button @click="collectListNum" v-if="userInfo?.id !== info.createUserVo?.id && id != 0">
                 {{ info.isLove===1 ? '取消收藏' : '收藏'}}
              </n-button>
              <n-button>评论</n-button>
            </n-space>
          </n-space>
        </template>
      </n-thing>
      <n-thing class="person_thing">
        <template  #header>
          <SIcon :size="20" icon="icon-yinle4"/>
          收藏音乐
        </template>
        <!--        <template  #header-extra>-->
        <!--          <n-space inline>-->
        <!--            <n-input placeholder="歌手/歌名" round/>-->
        <!--            <n-button  :focusable="false"  :bordered="false" >-->
        <!--              <SIcon :size="22" icon="icon-icon-test"/>-->
        <!--            </n-button>-->
        <!--          </n-space>-->
        <!--        </template>-->
        <template #description >
          <n-list clickable hoverable  bordered style="border-top: 2px solid #C10D0C;" @mouseleave="showButKey=null">
            <n-list-item v-for="(item,index) of info.musicList || []"
                         @mouseenter="showButKey=item.id"
                         style="height: 40px;padding: 0 20px"
            >

              <n-grid>
                <n-gi :span="1">{{index+1}}.</n-gi>
                <n-gi :span="11">
<!--                  <n-button size="small" quaternary circle @click="loveMusic">-->
<!--                    <template #icon>-->
                      <SIcon :color="item.isLove === 1 ? 'red' : undefined"  :icon=" item.isLove === 1 ? 'HeartSharp' : 'HeartOutline'"/>
<!--                    </template>-->
<!--                  </n-button>-->
                  {{item.musicName}} - {{item.singerVo?.name}}
                </n-gi>
                <n-gi :span="11">
                  <n-space v-if="item.id===showButKey">
                    <n-button size="small" circle title="播放" @click="playMusic(item,index)">
                      <SIcon icon="PlayOutline"/>
                    </n-button>
                    <n-button size="small" circle title="添加到播放列表"  @click="addPlay(item)">
                      <SIcon icon="Add"/>
                    </n-button>
                    <n-button size="small" circle title="添加到歌单"  @click="addSongList(item)">
                      <SIcon icon="DuplicateOutline"/>
                    </n-button>
                    <n-button size="small" circle title="下载"  @click="download(item)">
                      <SIcon icon="DownloadOutline"/>
                    </n-button>
                    <n-button size="small" circle title="删除"  @click="remove(item)">
                      <SIcon icon="TrashOutline"/>
                    </n-button>
                  </n-space>
                </n-gi>
                <n-gi :span="1">{{item.num}}</n-gi>
              </n-grid>
            </n-list-item>
          </n-list>
        </template>

      </n-thing>
    </n-card>
    <UpdateSongList  ref="updateSongRef" />
  </n-layout>
</template>
<script setup>

import {useRoute} from "vue-router";
import SIcon from "@/components/public/SIcon.vue";
import {addSongListLove, addSongListMusic, deleteSongList, getSongListById} from "@/api/music/songListApi";
import useUserStore from "@/stores/admin/useUserStore";
import useMusicStore from "@/stores/admin/useMusicStore";
import {downloadFile} from "@/api/music/musicApi";
import UpdateSongList from "@/views/home/person/UpdateSongList.vue";

const props = defineProps({
  openMySongList:Function
})
const {userInfo} = storeToRefs(useUserStore())
const route = useRoute();
const id = ref()
const updateSongRef = ref()
const info = ref({})
const showButKey = ref()
onMounted(()=>{
  id.value = route.params.id
  // naive.message.info(id.value)
  getInfo(route.params.id)
})
function getInfo(id){
  getSongListById(id).then(res=>{
    info.value = res.data || {}
  })
}

function playMusic(item,index){
  useMusicStore().playSongList(info.value,item,index)
}
function addPlay(item){
  useMusicStore().addPlayList(item)
}
function addSongList(item){
    if (props.openMySongList){
      props.openMySongList(item);
    }
}
function download(item){
  if (!userInfo.value){
    naive.message.warning("请登录！")
    return
  }
  downloadFile(item.musicFile?.id).then(res=>{

  })
}

function collectListNum(){
  // 收藏歌单
  const type = info.value?.isLove ===1 ? "remove" : 'add'
  addSongListLove(id.value,type).then(res=>{
    naive.message.info("收藏成功")
    info.value.isLove = info.value?.isLove === 1 ? 0 : 1
  })
}
let router = useRouter();
function remove(item){
   let type = 'remove'
  addSongListMusic({musicId:item.id,type:type}).then(res=>{
    router.go(0)
  })
}
function openSongInfo(){
  updateSongRef.value?.onEdit()
}
function removeSongList(){
  naive.dialog.warning({
    title:'警告',
    content: '你确定要删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      deleteSongList(id.value).then(res=>{
        router.go(-1)
      })
    },
    onNegativeClick: () => {
    }
  })
}
</script>
<style>
.person_thing{
  padding-top: 20px;
}
.tab_thing{
  border-bottom: 2px solid #C10D0C;
  &.no_one{
    padding-top: 40px;
  }
}
</style>
